<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <!-- 引入 ECharts 和 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入 ECharts 词云插件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud/dist/echarts-wordcloud.min.js"></script>
    <style>
        body {
            background-color: #000000;
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 5px;
            color: #ffffff;
        }

        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 1px; /* 调整顶部间距为10px，可以根据需要调整 */
        }

        h1 {
            text-align: center;
            color: #00bcd4;
            margin-bottom: 20px;
            font-size: 2em;
        }

        .chart-row {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
        }

        .t_main_narrow, .t_main_wide {
            margin: 10px;
            padding: 10px;
            border: 1px solid #444;
            background-color: #f1eeee;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            transition: box-shadow 0.3s, transform 0.3s;
        }

        .t_main_narrow:hover, .t_main_wide:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px);
        }

        .t_main_narrow {
            width: 400px;
            height: 310px;
        }

        .t_main_wide {
            width: 900px;
            height: 310px;
        }

        @media (max-width: 1200px) {
            .t_main_wide {
                width: 90%;
            }
        }

        @media (max-width: 768px) {
            .chart-row {
                flex-direction: column;
            }

            .t_main_narrow, .t_main_wide {
                width: 90%;
            }
        }

        .chart-title {
            color: #00bcd4;
            font-size: 1.2em;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>课程管理图表展示</h1>
    <!-- 图表区域 -->
    <div class="chart-row">
        <div class="t_main_narrow">
            <div class="chart-title">气泡图</div>
            <div id="bubbleChart" style="width: 100%; height: 100%;"></div>
        </div>
        <div class="t_main_narrow">
            <div class="chart-title">页面点击率量规图</div>
            <div id="gaugeChart" style="width: 100%; height: 100%;"></div>
        </div>
        <div class="t_main_narrow">
            <div class="chart-title">出勤率与合格率</div>
            <div id="radarChart" style="width: 100%; height: 100%;"></div>
        </div>
    </div>
    <div class="chart-row">
        <div class="t_main_wide">
            <div class="chart-title">漏斗图</div>
            <div id="funnelChart" style="width: 100%; height: 100%;"></div>
        </div>
        <div class="t_main_wide">
            <div class="chart-title">词云图</div>
            <div id="wordCloudChart" style="width: 100%; height: 100%;"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        mounted: function () {
            this.loadBubbleChart();
            this.loadGaugeChart();
            this.loadRadarChart();
            this.loadFunnelChart();
            this.loadWordCloudChart();
        },
        methods: {
            loadBubbleChart() {
                var chart = echarts.init(document.getElementById('bubbleChart'));
                // 生成随机数据
                var data = [];
                for (var i = 0; i < 25; i++) {
                    data.push([Math.random() * 100, Math.random() * 100, Math.random() * 100]);
                }
                var option = {
                    title: {
                        textStyle: {
                            color: '#00bcd4'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    xAxis: {
                        type: 'value',
                        scale: true,
                        axisLine: {
                            lineStyle: {
                                color: '#00bcd4'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        scale: true,
                        axisLine: {
                            lineStyle: {
                                color: '#00bcd4'
                            }
                        }
                    },
                    series: [{
                        type: 'scatter',
                        symbolSize: function (data) {
                            return Math.sqrt(data[2]) * 5;
                        },
                        data: data,
                        itemStyle: {
                            color: '#00bcd4'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                formatter: function (param) {
                                    return 'x: ' + param.data[0] + '\ny: ' + param.data[1] + '\nvalue: ' + param.data[2];
                                },
                                position: 'top',
                                color: '#fff'
                            }
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }]
                };
                chart.setOption(option);
            },
            loadGaugeChart() {
                var chart = echarts.init(document.getElementById('gaugeChart'));
                var option = {
                    title: {
                        textStyle: {
                            color: '#00bcd4'
                        }
                    },
                    series: [{
                        type: 'gauge',
                        detail: {formatter: '{value}%'},
                        data: [{value: 80, name: '点击率'}],
                        axisLine: {
                            lineStyle: {
                                width: 10,
                                color: [
                                    [0.2, '#ff4500'],
                                    [0.8, '#00bcd4'],
                                    [1, '#228b22']
                                ]
                            }
                        },
                        splitLine: {
                            length: 15,
                            lineStyle: {
                                width: 2,
                                color: '#00bcd4'
                            }
                        }
                    }]
                };
                chart.setOption(option);
            },
            loadRadarChart() {
                var chart = echarts.init(document.getElementById('radarChart'));
                var option = {
                    title: {
                        textStyle: {
                            color: '#00bcd4'
                        }
                    },
                    tooltip: {},
                    radar: {
                        indicator: [
                            { name: '计算机科学', max: 100 },
                            { name: '智能科学', max: 100 },
                            { name: '物联网工程', max: 100 },
                            { name: '电子技术', max: 100 },
                            { name: '自动化', max: 100 },
                            { name: '应用物理', max: 100 }
                        ],
                        axisLine: {
                            lineStyle: {
                                color: '#00bcd4'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#00bcd4'
                            }
                        }
                    },
                    series: [{
                        name: '出勤率 vs 合格率',
                        type: 'radar',
                        data: [
                            {
                                value: [90, 85, 75, 65, 95, 80, 83],
                                name: '出勤率'
                            },
                            {
                                value: [70, 80, 85, 90, 60, 75, 73],
                                name: '合格率'
                            }
                        ],
                        areaStyle: {
                            opacity: 0.2
                        },
                        lineStyle: {
                            color: '#00bcd4'
                        }
                    }]
                };
                chart.setOption(option);
            },
            loadFunnelChart() {
                var chart = echarts.init(document.getElementById('funnelChart'));
                var option = {
                    title: {
                        textStyle: {
                            color: '#00bcd4'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    legend: {
                        data: ['展示', '点击', '登录', '查询', '访问'],
                        textStyle: {
                            color: '#00bcd4'
                        }
                    },
                    series: [{
                        name: '漏斗图',
                        type: 'funnel',
                        left: '10%',
                        top: 60,
                        bottom: 60,
                        width: '80%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside',
                            color: '#fff'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid',
                                color: '#00bcd4'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: [
                            {value: 60, name: '登录'},
                            {value: 40, name: '查询'},
                            {value: 20, name: '展示'},
                            {value: 80, name: '点击'},
                            {value: 100, name: '访问'}
                        ]
                    }]
                };
                chart.setOption(option);
            },
            loadWordCloudChart() {
                var chart = echarts.init(document.getElementById('wordCloudChart'));
                var option = {
                    title: {
                        textStyle: {
                            color: '#00bcd4'
                        }
                    },
                    tooltip: {
                        show: true
                    },
                    series: [{
                        type: 'wordCloud',
                        sizeRange: [12, 50],
                        rotationRange: [-90, 90],
                        shape: 'circle',
                        width: '100%',
                        height: '100%',
                        gridSize: 2,
                        drawOutOfBound: true,
                        textStyle: {
                            normal: {
                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160)
                                    ].join(',') + ')';
                                }
                            }
                        },
                        data: [
                            {name: '数据', value: 10000},
                            {name: '可视化', value: 6181},
                            {name: 'ECharts', value: 4386},
                            {name: '图表', value: 4055},
                            {name: 'JavaScript', value: 2467},
                            {name: 'Vue', value: 2244},
                            {name: '前端', value: 1898},
                            {name: 'HTML', value: 1484},
                            {name: 'CSS', value: 1112},
                            {name: '开发', value: 965},
                            {name: '代码', value: 847},
                            {name: '技术', value: 582},
                            {name: '编程', value: 555},
                            {name: '开源', value: 550}
                        ]
                    }]
                };
                chart.setOption(option);
            }
        }
    });
</script>
</body>
</html>
